<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>

<body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
    <div class="title">
        <span class="a active"><i>1</i>输入找回账号</span>
        <span class="b"><i>2</i>回答密保问题</span>
        <span class="c"><i>3</i>重置密码</span>
    </div>
    <div class="box" id="one">
        <div class="input-item">
            <label>请输入手机号：</label>
            <input type="text" id="phone">
        </div>
        <button id="phone_next">下一步</button>
    </div>
    <!----------------------------------------------------->
    <div class="box" id="two">
        <div class="input-item">
            <label> 用户名：</label>
            <input type="text" value="xxxx" disabled id="uname">
        </div>
        <div class="input-item">
            <label> 手机号：</label>
            <input type="text" value="xxxx" disabled id="dh">
        </div>
        <div class="input-item">
            <label>密保问题：</label>
            <input type="text" value="xxxxxxx" disabled id="qs">
        </div>
        <div class="input-item">
            <label>密保答案：</label>
            <input type="text" id="as">
        </div>
        <button class="btn_prev">上一步</button>
        <button class="btn_next">下一步</button>
    </div>
    <!----------------------------------------------------->
    <div class="box" id="three">
        <div class="input-item">
            <label>请输入新密码：</label>
            <input type="text" id="new_psd">
        </div>
        <button id="prve_two">上一步</button>
        <button id="reset">立即重置</button>
    </div>
    <br>
    <hr>


    <script src="./lib/axios.js"></script>
    <script>


        // http://124.223.14.236:3001/api
        axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

        $(".title span").on('click', function () {
            $(this).addClass('active').siblings().removeClass('active')
            let index = $(this).index()
            $('.box').eq(index).show().siblings('.box').hide()
        })

        let id = null
        // 1   下一步
        $("#phone_next").click(async function () {
            if ($("#phone").val().trim().length <= 0) {
                return alert("请输入手机号码")
            }
            $("#one").hide()
            $("#two").show()
            $('.title .a').removeClass('active').siblings('.b').addClass('active')

            await axios({
                method: 'GET',
                url: "/user/findPwd",
                params: {
                    phone: $("#phone").val(),
                }
            }).then(({ data: { data } }) => {
                // alert(JSON.stringify(data))
                id = data.id
                $("#uname").val(data.username)
                $("#dh").val(data.phone)
                $("#qs").val(data.question)
            })
        })

        // 2  上一步
        $('.btn_prev').click(function () {
            $("#one").show()
            $("#two").hide()
            $('.title .b').removeClass('active').siblings('.a').addClass('active')
        })


        // 2   下一步
        $('.btn_next').click(function () {
            if ($('#as').val().trim().length === 0) return alert("密保不能为空,请输入")
            $("#three").show()
            $("#two").hide()
            $('.title .b').removeClass('active').siblings('.c').addClass('active')
        })

        // 3  重置按钮
        $("#reset").click(async function () {
            await axios({
                method: 'POST',
                url: "/user/resetPwd",
                data: {
                    id: String(id),
                    password: $("#new_psd").val(),
                    answer: $("#as").val(),
                }
            }).then(({ data }) => {
                if (!data.success) {
                    $('#three').hide()
                    $('.title .c').removeClass('active')
                    $("#phone_next").click()
                    return alert(data.msg)
                }
                alert(data.msg)
                location.href = '../01-loginBaseCode/login.html'
            })
        })
        // 3  上一步
        $("#prve_two").click(function () {
            $("#three").hide()
            $("#two").show()
            $('.title .c').removeClass('active').siblings('.b').addClass('active')
        })





    </script>
</body>

</html>